<template>
	<view class="yg-gd">
		<view class="yg-gd-content">
			<!-- 轮播图 -->
			<view class="gd-content-swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in goodInfo.pics" :key="item.pics_id" @click="showPics(index)">
						<image :src="item.pics_mid" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 价格 -->
			<view class="yg-gd-price">
				<view class="gd-price-left">
					￥{{goodInfo.goods_price&&goodInfo.goods_price||0}}
				</view>
				<view class="gd-price-right">
					<view class="share">
						<view class="iconfont icon-fenxiang">
						</view>
						<button type="default" size="mini" open-type="share"></button>
					</view>
					<view class="collect" @click="handleCollect">
						<view :class="['iconfont',isCollect?'icon-shoucang_gaoliang': 'icon-shoucang']">
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="yg-gd-title">
				{{goodInfo.goods_name&&goodInfo.goods_name||"标题文字"}}
			</view>
			<!-- 图文详情的开始 -->
			<view class="yg-gd-rtext">
				<view class="title">
					图文详情
				</view>
				<!-- https://uniapp.dcloud.io/component/rich-text -->
				<!-- <rich-text :nodes="nodes"></rich-text> -->
				<!-- <rich-text :nodes="strings"></rich-text> -->
				<rich-text :nodes="goodInfo.goods_introduce"></rich-text>
			</view>
			<!-- 图文详情的结束 -->
		</view>
		<!-- 底部的tabbar开始 -->
		<view class="yg-gd-tabbar">
			<view class="gd-tabbar-item">
				<view class="iconfont icon-lianxikefu">
				</view>
				<view class="tabbar-item-text">
					联系客服
				</view>
				<button type="default" open-type="contact"></button>
			</view>
			<view class="gd-tabbar-item" @click="goToCart">
				<view class="iconfont icon-gouwuche">

				</view>
				<view class="tabbar-item-text">
					购物车
				</view>
			</view>
			<view class="gd-tabbar-item" @click="addToCart">
				<view class="tabbar-item-btn">
					加入购物车
				</view>
			</view>
			<view class="gd-tabbar-item" @click="goToPay">
				<view class="tabbar-item-pay">
					立即购买
				</view>
			</view>
		</view>
		<!-- 底部tabbar结束 -->
	</view>
</template>

<script>
	export default {
		// 获取路径参数
		async onLoad(obj) {
			const res = await this.$request({
				url: "goods/detail",
				data: obj
			})
			console.log(res)
			this.goodInfo = res.message
			let collect = uni.getStorageSync('collect') || []
			let index = collect.findIndex(item => item.goods_id === this.goodInfo.goods_id)
			if (index != -1) {
				this.isCollect = true
			}
		},
		data() {
			return {
				goodInfo: {},
				isCollect: false
			};
		},
		methods: {
			addToCart: function() {
				let carts = uni.getStorageSync('carts') || []
				let index = carts.findIndex(item => item.goods_id === this.goodInfo.goods_id)
				if (index != -1) {
					// 购物车存在，走添加数量逻辑
					let goodInfo = carts[index]
					if (goodInfo.num + 1 > goodInfo.goods_number) {
						uni.showToast({
							title: "已经超过最大库存了",
							icon: "none"
						})
					} else {
						goodInfo.num += 1
						carts[index]=goodInfo
						uni.showToast({
							title: "加入成功",
							icon: "none"
						})
					}

				} else {
					// 购物不存在，添加商品
					let goodInfo = JSON.parse(JSON.stringify(this.goodInfo))
					goodInfo.num = 1
					goodInfo.checked = true
					carts.push(goodInfo)
					uni.showToast({
						title: "添加成功",
						icon: "none"
					})
				}
				uni.setStorageSync('carts', carts)
			},
			// 前往支付页面
			goToPay: function() {
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			},
			// 前往购物车tab 页面
			goToCart: function() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 收藏按钮点击事件
			handleCollect: function() {
				let collect = uni.getStorageSync('collect') || []
				let index = collect.findIndex(item => item.goods_id === this.goodInfo.goods_id)
				if (index != -1) {
					// 收藏了，进行取消逻辑
					collect.splice(index, 1)
					uni.setStorageSync('collect', collect)
					this.isCollect = false
					uni.showToast({
						title: "取消收藏！",
						icon: "none"
					})
				} else {
					// 未收藏，进行收藏逻辑
					collect.push(this.goodInfo)
					uni.setStorageSync('collect', collect)
					this.isCollect = true
					uni.showToast({
						title: "收藏成功！",
						icon: "none"
					})
				}
			},
			// 图片预览的点击事件
			showPics: function(index) {
				// https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject 图片预览的接口
				// 图片预览的接口
				uni.previewImage({
					current: index,
					urls: this.goodInfo.pics.map(item => item.pics_mid)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yg-gd {
		.yg-gd-content {
			height: calc(100vh - 100rpx);
			overflow-y: scroll;

			.gd-content-swiper {
				height: 500rpx;

				swiper {
					height: 500rpx;
				}
			}

			.yg-gd-price {
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 5rpx;

				.gd-price-left {
					color: #eb4450;
				}

				.gd-price-right {
					display: flex;

					.share {
						position: relative;
						margin-right: 20rpx;

						button {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							padding: 0 !important;
							opacity: 0;
						}
					}

					.collect {
						.icon-shoucang_gaoliang {
							color: #eb4450;
						}
					}
				}
			}

			.yg-gd-title {
				height: 90rpx;
				padding: 5rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.yg-gd-rtext {
				.title {
					height: 60rpx;
					text-align: center;
				}
			}
		}

		.yg-gd-tabbar {
			height: 100rpx;
			display: flex;

			.gd-tabbar-item:nth-child(1) {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.iconfont {}

				.tabbar-item-text {
					font-size: 20rpx;
				}

				button {
					position: absolute;
					opacity: 0;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}

			.gd-tabbar-item:nth-child(2) {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.iconfont {}

				.tabbar-item-text {
					font-size: 20rpx;
				}
			}

			.gd-tabbar-item:nth-child(3) {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabbar-item-btn {
					height: 60rpx;
					width: 196rpx;
					border-radius: 30rpx;
					background-color: #fcaa23;
					color: white;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.gd-tabbar-item:nth-child(4) {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabbar-item-pay {
					height: 60rpx;
					width: 196rpx;
					border-radius: 30rpx;
					background-color: #ea4350;
					color: white;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}

	}
</style>
